<script setup lang="ts">
import type { ShoppingCartData } from '../../typings'
import { ref, computed } from 'vue';
import ProductCard from '../ProductCardComp/ProductCard.vue';
import { useOrderListStore } from '../../stores/orderList'
const { setBePaidList, delTobeoaid } = useOrderListStore()
const { list } = defineProps<{
    list: ShoppingCartData,
}>()

const expiredNum = ref(0)


let time = ref(list.expiredNotType * 10 * 1000);

const expiredNotFlag = ref(false)
const changeType = () => {

  
    
    setBePaidList(list.id, expiredNum.value)
    expiredNotFlag.value = !expiredNotFlag.value
    // time.value = expiredNum.value * 10 * 1000



}
const delToBePaidList = () => {
    delTobeoaid(list.id)
}
</script>

<template>
    <div class="order-list-com mt-2 p-3 rounded-md ">
        <div class="title flex justify-between p-3 bg-white">
            <span>
                {{ list.typeText }}
            </span>
            <span v-if="!expiredNotFlag">
                <van-count-down @finish="changeType" :time="time" />
            </span>
            <span v-show="list.expiredNotType == 0 && expiredNotFlag && list.type == 1">
                订单已过期
            </span>
        </div>
        <div class="com-list bg-white">
            <ProductCard :list="list" :type="'order'"></ProductCard>
        </div>

        <div class="price flex justify-end bg-white p-3">

            <span class="mr-2  text-xs">
                包邮,总计:<b>￥</b><b class=" text-lg font-bold">{{ (list.nowprice * list.num).toFixed(2) }}</b>
            </span>
            <span v-show="list.expiredNotType != 1" @click="delToBePaidList" class="px-6 py-1 bg-red-400 text-white">
                删除
            </span>
            <span v-show="list.expiredNotType == 1" class=" text-center px-6 py-1 bg-red-400 text-white">
                付款
            </span>

        </div>
    </div>
</template>